<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>boo02</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../../assets/css/original/bootstrap.min.css">
		<!-- font-awesome css -->
		<link rel="stylesheet" href="../../assets/css/original/font-awesome.min.css">
		<!-- style css -->
		<link rel="stylesheet" href="../../assets/css/original/style.css">
		<!-- modernizr js -->
		<link rel="stylesheet" href="../../layui/css/layui.css">
		<style type="text/css">
			.layui-form-label{
				width: 100px;
			}
			.form-box{
				padding-top: 90px;
				padding-bottom: 20px;
				width: 100%;
				background-color: #f8f8f8;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.form-box .form-content{
				width: 50%;
				height: auto;
				background: #FFF;
				padding: 40px 10%;
				position: relative;
			}
			.form-box .form-content .close-btn{
				position: absolute;
				width: auto!important;
				padding: 10px;
				background: #CCCCCC!important;
				color: #444;
				top: 40px;
				right: 10%;
			}
			.form-box .form-content .close-btn:hover{
				width: auto!important;
				padding: 10px;
				background: #CCCCCC!important;
			}
			.form-box .form-content h3{
				width: 100%;
				text-align: center;
				margin-bottom: 40px;
			}
			.form-box .form-content .input-item{
				margin-bottom: 20px;
				display: flex;
			}
			.form-box .form-content .input-item input{
				height: 50px;
				line-height: 50px;
				flex: 1;
			}
			.form-box .form-content .input-item .input-name{
				padding: 0;
				width: 100px;
				height: 50px;
				line-height: 50px;
			}
			.form-box .form-content .input-item img{
				width: 150px;
				height: 150px;
				border-radius: 10px;
				margin-left: 20px;
				object-fit: cover;
			}
			.form-box .form-content button{
				background: #FE4847;
				color: #fff;
				border: 0;
				width: 100%;
			}
			.form-box .form-content button:hover {
			    background: #292929;
			    color: #fff;
			}
			.layui-upload-img{
				width: 100px;
				height: 100px;
				object-fit: cover;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="form-box layui-form" lay-filter="layform">
				<div class="form-control form-content">
					<h3>配送单填写</h3>
					<div>
						<div class="layui-form-item">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-block">
							  <input v-model="detail.mingcheng" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">图片</label>
							<div class="layui-input-block">
								<button type="button" class="layui-btn" id="tupianupload-img" v-if="!detail.tupian">上传图片</button>
								<div class="layui-upload-list" v-if="detail.tupian">
									<img class="layui-upload-img" id="tupianimg-temp" :src="detail.tupian?detail.tupian.split(',')[0]:''">
									<p id="demoText"></p>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">购买数量</label>
							<div class="layui-input-block">
							  <input v-model="detail.goumaishuliang" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入购买数量" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">商家编号</label>
							<div class="layui-input-block">
							  <input v-model="detail.shangjiabianhao" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入商家编号" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">账号</label>
							<div class="layui-input-block">
							  <input v-model="detail.zhanghao" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入账号" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">备注</label>
							<div class="layui-input-block">
							  <input v-model="detail.beizhu" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入备注" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">骑手收益</label>
							<div class="layui-input-block">
							  <input v-model="detail.qishoushouyi" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入骑手收益" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">接单时间</label>
							<div class="layui-input-block">
								<input type="text" name="" placeholder="请输入接单时间" autocomplete="off" class="layui-input" id="jiedanshijian">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
							  <input v-model="detail.yonghuming" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">骑手姓名</label>
							<div class="layui-input-block">
							  <input v-model="detail.qishouxingming" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入骑手姓名" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">电话</label>
							<div class="layui-input-block">
							  <input v-model="detail.dianhua" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入电话" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">请选择订单状态</label>
							<div class="layui-input-block">
								<select id="dingdanzhuangtai" name="interest" lay-filter="dingdanzhuangtai">
									<option :value="item" v-for="(item,index) in dingdanzhuangtaiOptions">{{item}}</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">地址</label>
							<div class="layui-input-block">
							  <input id="fulladdressMap" v-model="detail.fulladdress" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="点击选择地址" class="layui-input">
							</div>
						</div>
					</div>
					<button type="button" class="btn btn-default" @click="onConfirmTap">提交</button>
				</div>
			</div>
		</div>
		<!-- jquery latest version -->
		<script src="../../assets/js/relys/jquery-1.12.0.min.js"></script>
		<!-- all js here -->
		<!-- bootstrap js -->
		<script src="../../assets/js/relys/bootstrap.min.js"></script>
		<!-- meanmenu js -->
		<script src="../../assets/js/relys/jquery.meanmenu.js"></script>
		<!-- jquery-ui js -->
		<script src="../../assets/js/relys/jquery-ui.min.js"></script>
		<script src="../../assets/jquery-ui.js"></script>
		
		<!-- vue js -->
		<script src="../../assets/js/vue.min.js"></script>
		<script src="../../assets/js/api/api.js"></script>
		<script src="../../assets/js/api/tplist.js"></script>
		<script src="../../assets/js/api/defaultuser.js"></script>
		<script src="../../assets/js/relys/utils.js"></script>
		<script src="../../assets/js/relys/storage.js"></script>
		<script src="../../layui/layui.js"></script>
		<script src="../../assets/js/validate.js"></script>

		<!-- 地图 -->
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
		<script type="text/javascript" src="../../assets/js/relys/bootstrap.AMapPositionPicker.js"></script>

		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					crosstable: "",
					crosstableobj: {},
					detail: {
						mingcheng: "",
						tupian: "",
						goumaishuliang: "",
						shangjiabianhao: "",
						zhanghao: "",
						beizhu: "",
						qishoushouyi: "",
						jiedanshijian: "",
						yonghuming: "",
						qishouxingming: "",
						dianhua: "",
						dingdanzhuangtai: "",
						sfsh: "",
						shhf: "",
						ispay: "",
						longitude: "",
						latitude: "",
						fulladdress: "",
					},
					dingdanzhuangtaiOptions: [],
				},
				computed: {
				},
				updated() {
					layui.form.render('select','layform');
				},
				async created() {
					var id = getParam('id')
					var tablename = getParam('tablename')
					this.crosstable = tablename
					if(tablename){
						var cross = JSON.parse(localStorage.getItem("crossObj"))
						this.crosstableobj = cross
						for(var key in cross){
							if("mingcheng" == key){
								this.detail[key] = cross[key]
							}
							if("tupian" == key){
								this.detail[key] = cross[key]
							}
							if("goumaishuliang" == key){
								this.detail[key] = cross[key]
							}
							if("shangjiabianhao" == key){
								this.detail[key] = cross[key]
							}
							if("zhanghao" == key){
								this.detail[key] = cross[key]
							}
							if("beizhu" == key){
								this.detail[key] = cross[key]
							}
							if("qishoushouyi" == key){
								this.detail[key] = cross[key]
							}
							if("jiedanshijian" == key){
								this.detail[key] = cross[key]
							}
							if("yonghuming" == key){
								this.detail[key] = cross[key]
							}
							if("qishouxingming" == key){
								this.detail[key] = cross[key]
							}
							if("dianhua" == key){
								this.detail[key] = cross[key]
							}
							if("dingdanzhuangtai" == key){
								this.detail[key] = cross[key]
							}
							if("sfsh" == key){
								this.detail[key] = cross[key]
							}
							if("shhf" == key){
								this.detail[key] = cross[key]
							}
							if("ispay" == key){
								this.detail[key] = cross[key]
							}
							if("longitude" == key){
								this.detail[key] = cross[key]
							}
							if("latitude" == key){
								this.detail[key] = cross[key]
							}
							if("fulladdress" == key){
								this.detail[key] = cross[key]
							}
						}
																																																																																																																																																																																																																																			}else if(id){
						await this.getDetail(id, tablename)
					}
					
					// 获取用户信息
					var user = localStorage.getItem("sessionTable")
					session(`${user}`, (data)=>{
						if (data && data.code === 0) {
							var json = data.data;
							this.detail.yonghuming = json.yonghuming
							this.detail.qishouxingming = json.qishouxingming
							this.detail.dianhua = json.dianhua
						}
					})

					this.dingdanzhuangtaiOptions = "已接单,配送中,已送达".split(',')
				},
				methods: {
					onPageTap(url) {
						window.location.href = url
					},
					updateTap(tablename, data){
						return new Promise((resolve) => {
							updateFun(tablename, data, (res) => {
								if(res&&res.code==0){
									console.log("更新成功")
									resolve(res)
								}
							})
						})
						
					},
					onConfirmTap(){
					$("#fullAddressMap").click();
					$("#idAMapPositionPickerCancelBtn").click();
					this.detail.fulladdress = $('#fulladdressMap').val();
					if(!isIntNumer(this.detail.qishoushouyi)){
						alert(`骑手收益应输入整数`);
						return
					}
						addFun("peisongdan", this.detail, (res) => {
							if(res&&res.code==0){
								alert("提交成功")
								window.history.go(-1);
							}
						})
					},


					getDetail(tablename, id) {
						return new Promise((resolve) => {
						goodsInfo(tablename, id, (res) => {
							this.detail = res.data
							resolve(res)
						})
						})
					}
				}
			})
 			$(document).ready(function() {
				var p = $("#fulladdressMap").AMapPositionPicker();
				$("#fulladdressMap").on('click', function() {
					var position = p.AMapPositionPicker('position');
					console.log(position)
					app.detail.latitude = position.latitude;
					app.detail.longitude = position.longitude;
					app.detail.fulladdress = position.address;
				});
			});
			$(function(){




				layui.use('upload', function(){
					var $ = layui.jquery
					,upload = layui.upload;
					//普通图片上传
					var uploadInst = upload.render({
						elem: '#tupianupload-img'
						,url: baseurl+"file/upload" //改成您自己的上传接口
						,headers: {
							Token: getStorage("Token")
						}
						,before: function(obj){
						  //预读本地文件示例，不支持ie8
						  obj.preview(function(index, file, result){
							$('#tupianimg-temp').attr('src', result); //图片链接（base64）
						  });
						}
						,done: function(res){
						  //如果上传失败
						  if(res.code > 0){
							return layer.msg('上传失败');
						  }else{
							  app.detail.tupian = baseurl+"/upload/"+res.file
							  return layer.msg('上传成功');
						  }
						  //上传成功
						}
					})
				});










				layui.use('laydate', function(){
					var laydate = layui.laydate;
					//日期时间选择器
					laydate.render({ 
						elem: '#jiedanshijian',
						type: 'datetime',
						done: function(value, date, endDate){
						    console.log(value); //得到日期生成的值，如：2017-08-18
						    app.detail.jiedanshijian = value
						 }
					});
				});






















				layui.use(['form','layedit'], function(){
					var form = layui.form,
						layedit = layui.layedit,
						$ = layui.jquery,
						layer = layui.layer;
				        
					form.on('select(dingdanzhuangtai)', function(data){
						app.detail.dingdanzhuangtai = data.value
					});
				});
			});
		</script>
	</body>
</html>
